<template>
    <el-container>
        <el-header>
            <h1>用户信息</h1>
        </el-header>
        <el-main>
            <el-card>
                <h2>{{ userInfo.name }}</h2>
                <p>邮箱：{{ userInfo.email }}</p>
                <p>注册日期：{{ userInfo.registrationDate }}</p>
                <h3>收藏餐厅</h3>
                <ul>
                    <li v-for="restaurant in userInfo.favoriteRestaurants" :key="restaurant">
                        {{ restaurant }}
                    </li>
                </ul>
                <h3>历史操作记录</h3>
                <ul>
                    <li v-for="item in userInfo.history" :key="item.id">
                        {{ item.type }} - {{ item.details }}
                    </li>
                </ul>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                userInfo: {
                    name: '张三',
                    email: 'zhangsan@example.com',
                    registrationDate: '2022-01-01',
                    favoriteRestaurants: [
                        '一食堂麻辣烫'
                        // ...其他收藏的餐厅列表
                    ],
                    history: [
                        { id: 1, type: '评论', details: '对“一食堂麻辣烫”发表了评论' },
                        { id: 2, type: '收藏', details: '收藏了“一食堂麻辣烫”' }
                        // ...其他历史操作记录
                    ]
                }
            };
        }
    };
</script>

<style scoped>
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        margin-bottom: 10px;
    }
</style>